<template>
    <div class="pgauthset">
        <main-layout>
          <bar-title title="权限设置" comfirmBtn back @comfirm="save"/>
          <div style="height: 20px;"></div>
            <el-tree v-if="initover" 
            ref="treeRef" 
            :props="options" 
            node-key="id" 
            :data="lists" 
            default-expand-all 
            show-checkbox 
            @check-change="handleCheckChange" 
            :expand-on-click-node="false"
            :default-checked-keys="defaultCheckedList"/>
        </main-layout>
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted,reactive } from 'vue';
  import{useRouter} from "vue-router"
  import {getAuthList,saveAuth,getRoleAuthList} from '@/api/system'
  import mainLayout from '@/components/custom/mainLayout.vue'
  import { message } from '@/utils/element'
  import { ElMessageBox } from 'element-plus'
  import barTitle from '@/view/produceManage/task/components/barTitle.vue'

  const router = useRouter()
  
  const props = defineProps({
      disabled:'',
      show: {
          type: Boolean,
          default: false
      },
      title: String,
      //editData: Object,
      type:Number // 操作类型：1为新增，2为编辑，3为查看
  })
  const emit = defineEmits(['update:show','success'])
  
  const options = ref({
    id: 'id',
    label: 'name',
    children: 'children',
    disabled: 'disabled', // 禁用标志
    class: (data, node) => {
        //console.log("node:",node)
        return 'yuyu-'+node.level
    }
  })
  const lists = ref([])
  const defaultExpandedKeys = ref([])
  const treeRef = ref(null)
  const defaultCheckedList = ref([])//ref([35, 36, 37, 38])  // 需要默认选择的模块
  const selectedKeys = ref([]) // 当前选择的值
  const initover = ref(false)
  
  const dialogFlag = ref(props.show)

  const mnshj= {
    id:router.currentRoute.value.query.id,
    roleCode:router.currentRoute.value.query.roleCode
  }
  
  onMounted(()=>{
      console.log("mnshj:",mnshj)
      getAuthList({
          id:99,
          roleId:mnshj.id
      }).then(res =>{
          lists.value = res.children
          //设置默认展开
        //   lists.value.forEach(item => {
        //       defaultExpandedKeys.value.push(item.id)
        //   });
  
          // 获取该角色的权限列表
          getRoleAuthList({roleId:mnshj.id}).then(res2 =>{
              if(res2.code ==0 || res2.success){
                  const authlists = res2.data[mnshj.roleCode] || []
                  authlists.forEach(code =>{
                      let id = findEleToArr(code,lists.value)
                      if(id){
                          defaultCheckedList.value.push(id)
                      }
                  })
              }else{
                  message(res2.message || '无法连接网络，请检查您的网络连接',3)
              }
              initover.value = true
          })
      })
  })


  
  // 判断ele是否在arr中
  let id = ''
  const findEleToArr=(ele,arr)=>{
      for(let i=0;i<arr.length;i++){
          let item = arr[i]
          if(item.permission == ele){
              id = item.id
              break;
          }else if(item.children){
              findEleToArr(ele,item.children)
          }
      }
      return id
  }
  
  const save = async() => {
      if(selectedKeys.value.length<1){
          return message('请选择权限菜单',3)
      }
      let params = []
      selectedKeys.value.forEach(id =>{
          params.push({resourceId:id,roleId:mnshj.id})
      })
      //console.log("params:",params)
      const res = await saveAuth(params)
      if(res.code ==0 || res.success){
          message('设置成功',2)
          router.back(-1)
      }else{
          message(res.message,3)
      }
  }
  
  const handleCheckChange =(data)=>{
      selectedKeys.value = treeRef.value.getCheckedKeys(false)
      //console.log("选择：",selectedKeys.value)
  }
  
  
  const close = () => {
      emit('update:show', false)
  }
  </script>
  <style lang="scss">
        .el-tree{
            border-bottom: 1px solid #DDDDDD;
        }
      .yuyu-1>.el-tree-node__content{
            height: 46px;
            background: #F7F7F7;
            border: 1px solid #DDDDDD;
            border-bottom: 0;
      }
      .yuyu-1>.el-tree-node__content>.el-tree-node__expand-icon{
        box-sizing: border-box;
        height: 46px;
        width: 46px;
        // margin-left: 10px;
         margin-right: 20px;
        background: url(/src/assets/zd.png) center center no-repeat;
        background-size: 16px auto;
        background-color: #fff;
        border-right: 1px solid #DDDDDD;
        transform:none;
        &.expanded{
            background-image: url(/src/assets/zk.png)
        }
      }
      .yuyu-1>.el-tree-node__content>.el-tree-node__expand-icon>.icon{
        display: none;
      }
      .yuyu-2{
        display: flex;
        border: 1px solid #DDDDDD;
        border-bottom: 0;
      }
      .yuyu-2>.el-tree-node__content{
        box-sizing: border-box;
        width: 180px;
        height: 46px;
        padding: 0!important;
        border-right: 1px solid #DDDDDD;
        flex-shrink: 0;
      }
      .yuyu-2>.el-tree-node__content>.el-tree-node__expand-icon{
        box-sizing: border-box;
        height: 46px;
        width: 46px;
        // margin-left: 10px;
         margin-right: 20px;
        background-color: #fff;
        border-right: 1px solid #DDDDDD;
        transform:none;
      }
      .yuyu-2>.el-tree-node__content>.el-tree-node__expand-icon>.icon{
        display: none;
      }
      .yuyu-2>.el-tree-node__children{
        display: flex!important;
      }
      .yuyu-3{
        display: flex;
        align-items: center;
      }
      .yuyu-3>.el-tree-node__content{
        box-sizing: border-box;
        width: 180px;
        // height: 46px;
        // padding: 0 40px 0 0;
        // border-right: 1px solid #DDDDDD;
        // flex-shrink: 0;
      }
      .yuyu-3>.el-tree-node__content>.el-tree-node__expand-icon{
        display: none;
      }
      .yuyu-3>.el-tree-node__children{
        display: flex!important;
      }
      
      .yuyu-4{
        display: flex;
        height: 46px;
        align-items: center;
        &:first-child{
            border-left: 1px solid #DDDDDD;
        }
      }

      .pgauthset .el-checkbox__input.is-checked .el-checkbox__inner{
        background-color:#04AE70;
        border-color: #04AE70;
      }
      .pgauthset .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color:#04AE70;
        border-color: #04AE70;
      }
  </style>
  
  